<template>
    <!--电子期刊详情页-->
    <div class="local-history-box">
        <!--搜索框-->
        <div class="search-box">
            <div class="search-item">
                <a-input class="input-item" placeholder="请输入文献标题关键字" v-model="searchValue"/>
                <a-button class="button-item" @click="onSearch"><a-icon type="search" /></a-button>
            </div>
        </div>

        <div class="classification-box">
            <!--分类标签-->
            <div class="classification-inner-box">
                <div class="classification-item">
                    <span>电子期刊：</span>
                    <div
                        class="label-item"
                        v-for="(item, index) in topicDataList"
                        :key="index"
                        @click="onChangeTopic(index)"
                        :class = item.class
                    >
                        <span :class="item.class">{{item.title}}</span>
                    </div>
                </div>
            </div>
        </div>
        <!--内容列表-->
        <div class="content-box">
            <div class="content-list-box">
                <book-detail-component
                    class="book-item"
                    v-for="(item, index) in pageData.records"
                    :key="index"
                    :book-data="item"
                />
            </div>

            <div class="pagination-box">
                <!--分页器-->
                <pagination-component
                    class="pagination"
                    :loading="loadPageDataSetting.loading"
                    :page-data="pageData"
                    :page-size="loadPageDataSetting.pageSize"
                />
            </div>
        </div>

    </div>
</template>

<script>
import PaginationComponent from "../../components/ToolComponent/PaginationComponent";
import BookDetailComponent from "@/components/SourseDataComponent/DBook/BookDetailComponent";
import LoadTopicInfoMixin from "@/mixins/LoadTopicInfoMixin";
import {search} from "@/api/CommonApi";
import LoadTopicPageDataMixin from "@/mixins/LoadTopicPageDataMixin";

const CODE = "digital-journal";
//全部
const COLUMN_ITEM = {
    title:"全部",
    code : "digital-journal"
};
export default {
    name: "DigitalJournalTemplate",
    data(){
        return{
            //栏目
            topicDataList:[],
            //搜索框value
            searchValue:'',
            //当前路由query
            currentQuery:{
               code:CODE
            }
        }
    },
    created(){
        this.currentQuery.code = this.$route.query.code || CODE;

        this.loadTopicInfo(CODE).then(() => {
            //异步操作，提取子栏目数组
            this.topicDataList = this.topicData.child || [];
            this.topicDataList.unshift(COLUMN_ITEM);
            for(let i = 0; i < this.topicDataList.length; i++){
                const item = this.topicDataList[i];
                item.class = {};
                if(this.currentQuery.code === item.code){
                    item.class = {active : true};
                }
            }
        }).catch(err => {
            console.log(err);
        }),

        //设置分页大小
        this.setPageSize(15);
        //加载分页数据
        this.loadQueryData(this.currentQuery);
    },

    components:{
        PaginationComponent,
        BookDetailComponent,
        // GuidePosition
    },
    mixins:[
        //记载分页数据
        LoadTopicPageDataMixin,
        //加载分页子栏目
        LoadTopicInfoMixin
    ],
    computed:{
        // 当前激活的栏目的query
        activeTopicCode(){
            return {...this.$route.query}
        }
    },
    watch:{
        // 监听query的变化并加载数据
        activeTopicCode(val){
            this.loadQueryData(val)
        },
        // 监听路由变化,如果query.page参数发生改变,则重新拉取分页数据
        $route(to){
            // 页码变化
            let page = to.query.page
            if(!page) return;
            page = parseInt(page)
            if(page <= 0){return}
            if(page !== this.pageData.current){
                setTimeout(() => this.loadPageData(page))
            }
        }
    },
    methods:{
        onSearch(){
            console.log("onSearch()")
            this.$router.push({
                query:{code:CODE, keyword:this.searchValue}
            })

        },
        onChangeTopic(index){
            this.currentQuery.code = this.topicDataList[index].code;
            for(let i = 0; i < this.topicDataList.length; i++){
                const item = this.topicDataList[i];
                item.class = {};
                if(i === index){
                    item.class = {active : true}
                }
            }
            this.$router.push({query:{code:this.currentQuery.code}});
        },
        //加载页面数据
        loadQueryData(val){
            if(val.keyword){
                search({
                    topicCode:val.code,
                    keyword:val.keyword,
                    searchTopic:true,   //是否搜索栏目
                    orderByClicks:'DESC',//按点击量降序排列
                    orderByCreateTime:'DESC' //按时间降序排列
                }).then(res => {
                    this.pageData = res.result.resource || {current: 1};
                })
            }
            else if(val.code){
                this.loadPageDataSetting.code = val.code
                //如果有时间范围筛选
                if(val.timeRange){
                    this.setParams({code : val.code, timeRange : val.timeRange})
                }
                // 否则重新加载数据
                this.loadPageData(1).then(() => {
                    console.log("topic = ", this.pageData);
                }).catch(err => {
                    console.log(err);
                })
            }
        }
    }


}
</script>


<style lang="less" scoped>
//phone
@media only screen and (max-width:576px){
    @width:100vw;
    @height:50vh;
    .local-history-box{
        width:@width;
        display: flex;
        flex-direction: column;
        align-items: center;
        //搜索框
        .search-box{
            width:@width;
            height:15vw;
            display:flex;
            justify-content: center;
            align-items: center;
            background-color:white;
            .search-item{
                @search-width: 80vw;
                @search-height:8vw;
                border:1px solid RGBA(15, 121, 205, 1);
                width:@search-width;
                height:@search-height;
                display:flex;
                justify-content: flex-start;
                align-items: center;
                border-radius: calc(@search-height / 2);
                overflow: hidden;
                background:linear-gradient(to right, white 79.5%, RGBA(15, 121, 205, 1) 79.5%);
                background-clip: border-box;

                .input-item{
                    width:calc(@search-width / 5 * 4);
                    height:@search-height;
                    border:none;
                }
                .button-item{
                    width:calc(@search-width / 5);
                    height:@search-height;
                    border-radius: 0 calc(@height / 2) calc(@search-height / 2) 0;
                    border:none;
                    background-color:RGBA(15, 121, 205, 1);
                    color:white;
                    font-size:5vw;
                }
            }
        }

        //分类标签
        .classification-box{
            width:@width;
            background-color:white;
            display: flex;
            justify-content: center;
            .classification-inner-box{
                width: @width;
                padding:1vw 2vw;
                display:flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                .classification-item{
                    min-height:5vw;
                    line-height:5vw;
                    display:flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    font-size:3vw;
                    font-weight: 400;
                    .label-item{
                        margin:0 1vw;
                        color:black;
                        &:hover{
                            color:#1890ff;
                        }
                    }
                }
            }
        }
        //内容
        .content-box{
            width: @width;
            min-height:@height;
            padding:2vw 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            //内容列表
            .content-list-box{
                width:calc(@width - 9vw);
                min-height: calc(@height - 6vw - 4vw);  //650px - 110px = 540px;
                display:flex;
                flex-wrap:wrap;
                justify-content: flex-start;
                align-content: flex-start;
                .book-item{
                    margin:5vw;
                }

            }
            //分页器
            .pagination-box{
                display:flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .active{
        color:#1890ff;
    }
}

//pc
@media only screen and (min-width: 576px){
    @max-width:100vw;
    @min-width:900px;
    @min-height:750px;
    .local-history-box{
        max-width:@max-width;
        display: flex;
        flex-direction: column;
        align-items: center;
        //搜索框
        .search-box{
            width:@max-width;
            height:70px;
            background-color:white;
            display:flex;
            justify-content: center;
            align-items: center;
            .search-item{
                border:1px solid RGBA(15, 121, 205, 1);
                width:470px;
                height:32px;
                display:flex;
                justify-content: flex-start;
                align-items: center;
                border-radius: 16px;
                overflow: hidden;
                background:linear-gradient(to right, white 78.5%, RGBA(15, 121, 205, 1) 78.5%);
                background-clip: border-box;

                .input-item{
                    width:370px;
                    height:32px;
                    border:none;
                    border-radius: 16px 0 0 16px;
                }
                .button-item{
                    width:100px;
                    height:35px;
                    border-radius: 0 16px 16px 0;
                    border:none;
                    background-color:RGBA(15, 121, 205, 1);
                    color:white;
                    font-size:18px;
                }
            }
        }
        //分类标签
        .classification-box{
            width:@max-width;
            background-color:white;
            display: flex;
            justify-content: center;
            .classification-inner-box{
                width: @min-width;
                padding:10px 0;
                display:flex;
                flex-direction: column;
                justify-content: flex-start;
                align-items: flex-start;
                .classification-item{
                    min-height:25px;
                    display:flex;
                    flex-wrap: wrap;
                    justify-content: flex-start;
                    align-items: center;
                    font-size: 13px;
                    font-weight: 400;
                    line-height: 16px;
                    .label-item{
                        margin:0 10px;
                        cursor: pointer;
                        color:black;
                        &:hover{
                            color:#1890ff;
                        }
                    }
                }
            }

        }
        //内容
        .content-box{
            width: @min-width;
            min-height:@min-height;  //650px
            padding:30px 0;
            display: flex;
            flex-direction: column;
            //内容列表
            .content-list-box{
                min-height: calc(@min-height - 60px - 50px);  //650px - 110px = 540px;
                display:flex;
                flex-wrap:wrap;
                justify-content: flex-start;
                align-content: flex-start;
                .book-item{
                    margin:19px;
                }

            }
            //分页器
            .pagination-box{
                display:flex;
                justify-content: center;
                align-items: center;
            }
        }
    }
    .active{
        color:#1890ff;
    }
}
</style>
